<template>
  <div class="strut-div">
    <div class="clear-float">
      <div class="card-item" style="height: 340px; width: 615px;">
        <p class="card-title">假日客流对比</p>
        <div class="card-div" style="height: 286px;">
          <common-dualarea-chart ref="touristContrast" :config="touristContrastConfig"></common-dualarea-chart>
        </div>
      </div>
      <div class="card-item" style="height: 340px; width: 615px;float: right;">
        <p class="card-title">客流分析</p>
        <div class="card-div" style="height: 286px;">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="tourist-contrast">
                <img src="../../../assets/imgs/v2/data-blue.png" />
                <div>
                  <p class="tourist-contrast-name">景区实时客流</p>
                  <p class="tourist-contrast-number lcd-font">
                    <count-to :end="toristTime.realTime" :usegroup="true"></count-to>
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tourist-contrast">
                <img src="../../../assets/imgs/v2/data-day.png" />
                <div>
                  <p class="tourist-contrast-name">今日累计客流</p>
                  <p class="tourist-contrast-number lcd-font">
                    <count-to :end="toristTime.totalTime" :usegroup="true"></count-to>
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tourist-contrast">
                <img src="../../../assets/imgs/v2/data-purple.png" />
                <div>
                  <p class="tourist-contrast-name">目的地实时客流</p>
                  <p class="tourist-contrast-number lcd-font">
                    <count-to :end="liveTimes" :usegroup="true"></count-to>
                  </p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tourist-contrast">
                <img src="../../../assets/imgs/v2/data-year.png" />
                <div>
                  <p class="tourist-contrast-name">全年累计客流(万人)</p>
                  <p class="tourist-contrast-number lcd-font">
                    <count-to :end="totalTimes/10000" :usegroup="true"></count-to>
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="info-center clear-float" style="height: 313px;">
      <div class="info-center-corner">
        <p>
          <i style="background-color: #3EA2FE;"></i>
          <span>游客性别分析</span>
        </p>
        <div style="height: 258px;">
          <div class="tourist-sex clear-float">

            <div>
              <img src="../../../assets/imgs/v2/data-man.png" />
              <br />
              男士{{man}}%
            </div>
            <div>
              <img src="../../../assets/imgs/v2/data-woman.png" />
              <br />
              女士{{woman}}%
            </div>

          </div>

          <div class="tourist-sex-percent">
            <p> <span></span> </p> <br />
            <!-- 人群总数：7150.43万人 -->
          </div>

        </div>
      </div>

      <div class="card-item" style="height: 100%; width: 619px;">
        <p class="card-title">游客年龄分析</p>
        <div class="card-div" style="height: 259px;">
          <common-bar-chart ref="touristAge" :config="touristAgeConfig"></common-bar-chart>
        </div>
      </div>

      <div class="info-center-corner">
        <p>
          <i style="background-color: #6C43F7;"></i>
          <span>游客学历构成</span>
        </p>
        <div style="height: 258px;">
          <common-pieNew-chart ref="touristEducation" :config="touristEducationConfig"></common-pieNew-chart>
        </div>
      </div>
    </div>

    <div class="info-center clear-float" style="height: 303px;">
      <div class="info-center-corner">
        <p>
          <i style="background-color: #EDA652;"></i>
          <span>游客车产分析</span>
        </p>
        <div style="height: 249px;">
          <common-pieNew-chart ref="touristCar" :config="touristCarConfig"></common-pieNew-chart>
        </div>
      </div>

      <div class="card-item" style="height: 100%; width: 619px;">
        <p class="card-title">游客职业分析</p>
        <div class="card-div" style="height: 249px;">
          <div class="card-div" style="height: 259px;">
            <common-bar-chart ref="touristOccupation" :config="touristOccupationConfig"></common-bar-chart>
          </div>
        </div>
      </div>

      <div class="info-center-corner">
        <p>
          <i style="background-color: #77F7E7;"></i>
          <span>游客收入分析</span>
        </p>
        <div style="height: 249px;">
          <common-pieNew-chart ref="touristIncome" :config="touristIncomeConfig"></common-pieNew-chart>
        </div>
      </div>
    </div>

    <div class="card-item" style="height: 340px; width: 100%;">
      <p class="card-title">全域游客接待量分析</p>
      <div class="card-div" style="height: 286px;">
        <common-dualarea-chart ref="touristReceive" :config="touristReceiveConfig"></common-dualarea-chart>
      </div>
    </div>
  </div>
</template>

<script>
  import CommonDualareaChart from '@/components/common/common-dualarea-chart.vue';
  import CommonBarChart from '@/components/common/common-bar-chart.vue';
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import countTo from '@/components/count-to';
  export default {
    components: {
      CommonDualareaChart,
      CommonBarChart,
      CommonPieNewChart,
      countTo
    },
    data() {
      return {
        startDate: '',
        endDate: '',
        man: '',
        woman: '',
        toristTime: {
          realTime:0,
          totalTime:0
        },
        liveTimes: 0,
        totalTimes: 0,
        interval:null,
        touristContrastConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristContrastArea',
            x: [],
            xRotate: 45,
            y: [{
              axis: {
                min: null,
                max: null,
                offset: -30
              },
              title: '人数',
              data: [],
              startColor: '#77F7E7',
              endColor: 'rgba(119, 247, 231, 0)'
            }]
          }
        },
        touristAgeConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristAgeBar',
            yName: '(%)',
            xAxis: [],
            y: [{
              axis: {
                min: 0,
                max: 40,
                name: '(%)'
              },
              title: '',
              data: [],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#62FFEB' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2764E2' // 100% 处的颜色
                  }
                ]
              },
              stack: '1'
            }]
          }
        },
        touristEducationConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristEducationPie',
            title: '',
            color: ['#6C43F7', '#EDA652', '#3EA2FE', '#77F7E7'],
            legend: {
              show: false,
              left: '72%',
              top: '20%',
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 15
              },
              data: []
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} {b}<br/> {c}%'
            },
            series: [{
              name: '',
              type: 'pie',
              radius: ['0%', '50%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }]
          }
        },
        touristCarConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristCarPie',
            title: '',
            color: ['#6C43F7', '#77F7E7'],
            legend: {
              show: true,
              left: '38%',
              top: '40%',
              orient: 'vertical',
              textStyle: {
                color: '#fff',
                fontSize: 18
              },
              data: []
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} {b}<br/> {c}%'
            },
            series: [{
              name: '',
              type: 'pie',
              radius: ['55%', '65%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }]
          }
        },
        touristOccupationConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristOccupationBar',
            yName: '(%)',
            xAxis: [],
            y: [{
              axis: {
                min: 0,
                max: 35,
                name: '(%)'
              },
              title: '',
              data: [],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: '#6C43F7' // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: '#B49EFF' // 100% 处的颜色
                  }
                ]
              },
              stack: '1'
            }]
          }
        },
        touristIncomeConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristIncomePie',
            title: '',
            color: ['#6C43F7', '#EDA652', '#3EA2FE', '#77F7E7'],
            legend: {
              show: false,
              left: '72%',
              top: '20%',
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 15
              },
              data: []
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} {b}<br/> {c}%'
            },
            series: [{
              name: '',
              type: 'pie',
              radius: ['0%', '50%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }]
          }
        },
        touristReceiveConfig: {
          request: {
            url: 'url',
            params: {}
          },
          option: {
            id: 'touristReceiveArea',
            x: [],
            y: [{
              axis: {
                min: null,
                max: null,
                offset: -30
              },
              title: '人次',
              data: [],
              startColor: '#77F7E7',
              endColor: 'rgba(119, 247, 231, 0)'
            }]
          }
        }
      };
    },
    mounted() {

      this.startDate = new Date(new Date() - 7*24*60*60*1000).format('yyyy-mm-dd');
      this.endDate = new Date().format('yyyy-mm-dd');

      this.getHolidayName();
      this.getPortraitDayByDate();
      this.getReceptionNumObj();
      this.getReceptionTimeDataInit();
      this.getTotalTouristTimes();

      this.interval = setInterval(() => {
        this.getReceptionTimeDataInit();
        this.getTotalTouristTimes();
      },1000*60*30);
    },
    methods: {
      getHolidayName() {
        let that = this;
        let _url = this.$api.getDefaultHolidayName;

        this.$jquery.ajax({
          type: 'post',
          url: _url,
          dataType: 'json',
          data: {},
          contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
            if (res.retCode === 200) {
              let data = res.retData[0];
              that.getHolidayDayData(data.strholidayname);
            }
          }
        });
      },
      getHolidayDayData(name) {
        let that = this;
        let _url = this.$api.getHolidayDayData;
        let _param = {
          dataSource: '03',
          objType: '01',
          selName: '洪洞',
          holidayName: name,
          sFJNM: '00010001001400090001',
          startDate: this.startDate,
          endDate: this.endDate
        }

        this.$jquery.ajax({
          type: 'post',
          url: _url,
          dataType: 'json',
          data: _param,
          contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
            if (res.retCode === 200) {
              let data = res.retData.listData;
              that.touristContrastConfig.option.x = data.strarrDayArr;
              that.touristContrastConfig.option.y[0].data = data.strarrValArr;

              that.$refs.touristContrast.initChart();
            }
          }
        });
      },
      getPortraitDayByDate() {
        let that = this;
        let _url = this.$api.getPortraitDayByDate;
        let _param = {
          dataSource: '04',
          sObjType: '02',
          dateB: this.startDate,
          dateE: this.endDate
        }

        this.$jquery.ajax({
          type: 'post',
          url: _url,
          dataType: 'json',
          data: _param,
          contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
            if (res.retCode === 200) {
              let data = res.retData.listData;
              that.man = data.strArrSex[0];
              that.woman = data.strArrSex[1];

              that.touristAgeConfig.option.xAxis = data.strarrAgeName;
              that.touristAgeConfig.option.y[0].data = data.strarrAgeValue;

              that.touristCarConfig.option.legend.data = data.strarrCarName;
              that.touristCarConfig.option.series[0].data = data.strarrCarValue.map((item, index) => {
                return {
                  value: item,
                  name: data.strarrCarName[index]
                };
              });

              that.touristIncomeConfig.option.legend.data = data.strarrIncName;
              that.touristIncomeConfig.option.series[0].data = data.strarrIncValue.map((item, index) => {
                return {
                  value: item,
                  name: data.strarrIncName[index]
                };
              });

              that.touristEducationConfig.option.legend.data = data.strArrEdu.map(item => item.name);
              that.touristEducationConfig.option.series[0].data = data.strArrEdu;

              that.touristOccupationConfig.option.xAxis = data.strarrJobName;
              that.touristOccupationConfig.option.y[0].data = data.strarrJobValue;

              that.$refs.touristAge.initChart();
              that.$refs.touristCar.initChart();
              that.$refs.touristOccupation.initChart();
              that.$refs.touristEducation.initChart();
              that.$refs.touristIncome.initChart();

            }
          }
        });
      },
      getReceptionNumObj() {
        let that = this;
        let _url = this.$api.getReceptionNumObj;
        let _param = {
          sFJNM: '00010001001400090001',
          sObjType: '01',
        }

        this.$jquery.ajax({
          type: 'post',
          url: _url,
          dataType: 'json',
          data: _param,
          contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
            if (res.retCode === 200) {
              let data = res.retData.listData;
              that.touristReceiveConfig.option.x = data.strarrYearMonth.reverse();
              that.touristReceiveConfig.option.y[0].data = data.strarrVal.reverse();

              that.$refs.touristReceive.initChart();
            }
          }
        })
      },
      getReceptionTimeDataInit() {
        let that = this;
        let _url = this.$api.getReceptionTimeDataInit;
        let _param = {
          dataSource: '04',
          objType: '02',
          sFJNM: '00010001001400090001',
          selName: '全部',
        }

        this.$jquery.ajax({
          type: 'post',
          url: _url,
          dataType: 'json',
          data: _param,
          contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
          cache: false,
          success: function (res) {
            if (res.retCode === 200) {
              that.toristTime.totalTime = res.retData.listData.totalTime;
              that.toristTime.realTime = res.retData.listData.realTime;
            }
          }
        })
      },
      getTotalTouristTimes() {
        this.$jqGet(this.$api.getTouristToken, {
          userName: "bj_hdzb",
          pwd: "bj_hdzb2019"
        }).then(res => {
          if (res.retCode === 200) {
            return res.retData;
          }
        }).then(_token => {
          let date = new Date() - 1000 * 60 * 60;
          let _date = new Date(date).format('yyyymmddhhMMss');
          let date1 = new Date().format("yyyymmdd");

          let p1 = this.$jqGet(this.$api.getLiveTouristTimes, {
            token: _token,
            resultId: 1,
            date: _date,
          });

          let p2 = this.$jqGet(this.$api.getTotalTouristTimes, {
            token: _token,
            date: date1,
          });

          return Promise.all([p1, p2]);
        }).then(result => {
          this.liveTimes = result[0].result.count;
          this.totalTimes = result[1].result.count;
        })

      }
    },
    beforeDestroy() {
      clearInterval(this.interval);
    }
  };

</script>

<style scoped lang="scss" type="text/scss">
  .info-center {
  margin-top: 20px;
  margin-bottom: 20px;
  > div {
    float: left;
    height: 100%;
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }
  }

  .info-center-corner {
    width: 296px;
    background: url(../../../assets/imgs/v2/small-bg.png) no-repeat;
    background-size: cover cover;
    > p {
      height: 54px;
      > i {
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-left: 20px;
      }
      > span {
        font-size: 22px;
        color: #e9f4ff;
        margin-left: 10px;
        line-height: 54px;
        vertical-align: middle;
      }
    }
  }


}
  .tourist-contrast {
    height: 90px;
    margin-top:35px;
    >img {
      width: 90px;
      height: 90px;
      float: left;
      margin-left: 20px;
    }
    >div {
      margin-left: 120px;
    }
    .tourist-contrast-name {
      font-size: 20px;
      color: #6BEEFF;
      line-height: 35px;
    }
    .tourist-contrast-number {
      font-size: 40px;
      color: #FFFFFF;
      line-height: 55px;
    }

  }

  .tourist-sex {
    margin-top:38px;
    margin-bottom:20px;
    >div {
      width: 50%;
      float: left;
      text-align: center;
      >img {
        width: 85px;
        height: 85px;
        margin-bottom: 5px;
      }
      font-size: 20px;
    }

  }
  .tourist-sex-percent {
    font-size:19px;
    >p {
      display: inline-block;
      width: 80%;
      height: 12px;
      background-color: #F5ADE5;
      border-radius: 6px;
      vertical-align:middle;

      >span {
        float: left;
        width: 56%;
        height: 12px;
        background-color: #5DD4F2;
        vertical-align:middle;
        border-radius: 6px;
      }
    }
    text-align: center;
  }
</style>
